<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: lynn
 * @Date: 2020-10-20 19:16:01
 * @LastEditors: lynn
 * @LastEditTime: 2020-10-20 23:00:59
-->
<template>
  <div class="setpersonal">
    <h2>个人中心</h2>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本资料</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="centerDialogVisible = true">修改资料</el-button>
      </div>
      <el-row>
        <el-col :span="2">用户名:</el-col>
        <el-col :span="22">任静</el-col>
      </el-row>
      <el-row>
        <el-col :span="2">昵称:</el-col>
        <el-col :span="22">小可爱</el-col>
      </el-row>
      <el-row>
        <el-col :span="2">电话:</el-col>
        <el-col :span="22">12345678912</el-col>
      </el-row>
      <el-row>
        <el-col :span="2">邮箱:</el-col>
        <el-col :span="22">lynn997817@163.com</el-col>
      </el-row>
      <el-row>
        <el-col :span="2">性别:</el-col>
        <el-col :span="22">女</el-col>
      </el-row>
      <el-row>
        <el-col :span="2">生日:</el-col>
        <el-col :span="22">2015-10-15</el-col>
      </el-row>

    </el-card>
    <el-row type="flex" justify="space-between">
      <el-button type="info" style="margin:20px">修改密码</el-button>
      <el-button type="info" style="margin:20px">登出</el-button>
    </el-row>

    <!-- 修改资料 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      top="4%"
      width="35%"
      center
    >
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="60px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" :disabled="true" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname" />
        </el-form-item>
        <el-form-item label="电话" prop="mobail">
          <el-input v-model="ruleForm.mobail" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="ruleForm.sex" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-input v-model="ruleForm.birthday" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    const nicknameEvent = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('不能为空'))
      }
      callback()
    }
    const mobailEvent = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
        return
      } else if (!/^1[35789]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
        return
      } else {
        callback()
      }
    }
    const emailEvent = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
        return
      } else if (!/^\w+@(163|qq|192)\.(com|cnt|cn)$/.test(value)) {
        callback(new Error('请输入正确邮箱'))
        return
      } else {
        callback()
      }
    }
    return {
      centerDialogVisible: false,
      ruleForm: {
        username: '',
        nickname: '',
        mobail: '',
        email: '',
        sex: '',
        birthday: ''
      },
      rules: {
        nickname: [
          {
            validator: nicknameEvent,
            trigger: 'blur'
          }
        ],
        mobail: [
          {
            validator: mobailEvent,
            trigger: 'blur'
          }
        ],
        email: [
          {
            validator: emailEvent,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // submit
    submitForm() {

    },
    // reset
    resetForm() {

    }

  }
}
</script>

<style lang="scss" scoped>
.el-row{
    line-height: 35px;
}
.el-col:nth-child(odd){
    text-align: right;
    padding:0 20px 0 0 ;
    font-weight: bold;
}
</style>
